<template>
  <div class="homeContent">
    <div class="topInfo">
      <div class="zzc">
        <span class="text">总资产（元）</span>
        <van-icon @click="handleShow('0')" v-if="show" name="eye-o" />
        <van-icon @click="handleShow('1')" v-else name="closed-eye" />
      </div>
      <div class="total" v-if="show">{{ detailInfo.totalBalance }}</div>
      <div class="total" v-else>******</div>
      <div class="itemList">
        <div class="item">
          <div class="itemText">今日收入</div>
          <div class="val">{{ detailInfo.totalIncome }}</div>
        </div>
        <div class="item">
          <div class="itemText">今日支出</div>
          <div class="val">{{ detailInfo.totalExpense }}</div>
        </div>
        <div class="item">
          <div class="itemText">今日收益</div>
          <div class="val">{{ detailInfo.totalProfit }}</div>
        </div>
      </div>
    </div>
    <div class="more" @click="handleShowAccount">查看资产详情</div>
    <div class="middleInfo">
      <div class="itemList">
        <div class="item" v-for="(item, index) in accountList" :key="index">
          <div class="img">
            <!-- <img src="../../assets/img/zfb.jpg" alt=""> -->
            <svg class="icon" v-if="item.accountName == '支付宝'"
              style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z"
                fill="#009FE8" />
            </svg>
            <svg class="icon" v-if="item.accountName == '微信'"
              style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                fill="#28C445" />
              <path
                d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                fill="#28C445" />
            </svg>
          </div>
          <div class="info">
            <div class="top">
              <span>今日收入</span>
              <span>今日支出</span>
              <span>今日收益</span>
              <span>收益笔数</span>
              <span>支出笔数</span>
            </div>
            <div class="total">
              <span>{{ item.income }}</span>
              <span>{{ item.expense }}</span>
              <span>{{ item.profit }}</span>
              <span>
                {{ item.incomeCount }}
              </span>
              <span>{{ item.expenseCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-dialog class="accountDialog" v-model="showDialog" @confirm="handleConfirm">
      <div class="accountList">
        <div class="item" v-for="(item, index) in accountDetailList" :key="index">
          <div class="img">
            <!-- <img src="../../assets/img/zfb.jpg" alt=""> -->
            <svg class="icon" v-if="item.name == '支付宝'"
              style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z"
                fill="#009FE8" />
            </svg>
            <svg class="icon" v-if="item.name == '微信'"
              style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                fill="#28C445" />
              <path
                d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                fill="#28C445" />
            </svg>
          </div>
          <div class="info">
            <div class="top">
              <span>账户余额</span>
              <span>月初资产</span>
              <span>年初资产</span>
            </div>
            <div class="total">
              <span>{{ item.balance }}</span>
              <span>{{ item.previousBalance }}</span>
              <span>{{ item.previousAsset }}</span>
            </div>
          </div>

        </div>
      </div>
    </van-dialog>
    <div class="bottomInfo">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" @click="handleRoute('home')">主页</van-tabbar-item>
        <van-tabbar-item icon="search" @click="handleRoute('accounting')">记账</van-tabbar-item>
        <van-tabbar-item icon="friends-o" @click="handleRoute('my')">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { getHomeList, getHomeDetail, getAccountDetail } from "@/api/home.js";
export default {
  data() {
    return {
      showDialog: false,
      show: true,
      active: 0,
      accountList: [],
      detailInfo: {},
      accountDetailList:[]
    }
  },
  created() {
    this.getHomeList()
    this.getHomeDetail()
    this.getAccountDetail()
  },
  methods: {
    async getAccountDetail() {
      const res = await getAccountDetail()
      console.log(res, '11112res');
      this.accountDetailList = res.data

    },
    async getHomeDetail() {
      const res = await getHomeDetail()
      console.log(res, 'sss');
      this.detailInfo = res.data
    },
    async getHomeList() {
      const res = await getHomeList()
      this.accountList = res.data

    },
    handleConfirm() {

    },
    handleRoute(path) {
      this.$router.push('/' + path)
    },
    handleShow(flag) {
      console.log(123);

      if (flag == '0') {
        console.log(1230);
        this.show = false;
      } else if (flag == '1') {
        this.show = true;
      }
    },
    handleShowAccount() {
      this.showDialog = true;
    }
  }
};
</script>

<style lang="less" scoped>
.homeContent {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;

  .topInfo {
    height: 180px;
    background-color: #007aff;
    border-radius: 15px;
    padding: 20px 15px 10px;

    display: flex;
    flex-direction: column;

    .zzc {
      display: flex;
      justify-content: center;
      color: #fff;
      font-size: 18px;

      i {
        display: flex;
        align-items: center;

        &::before {
          padding-top: 2px;
        }
      }
    }

    .total {
      display: flex;
      justify-content: center;
      font-size: 22px;
      color: #fff;
      margin: 10px 0;
      font-weight: 800;
    }

    .itemList {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;

      .item {
        .itemText {
          font-size: 14px;
          color: #fff;
        }

        .val {
          margin-top: 5px;
          font-size: 16px;
          font-weight: 800;
          text-align: center;
        }

        color: #fff;
      }
    }
  }

  .more {
    text-align: right;
    color: #007aff;
    margin: 10px 0;
  }

  .middleInfo {
    display: flex;
    height: 70%;

    .itemList {
      height: 100%;
      width: 100%;
      overflow: auto;

      .item {
        display: flex;
        flex: 1;
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0px;
        }

        .img {
          width: 50px;
          height: 50px;
          border-radius: 8px;

          img {
            border-radius: 8px;

            width: 100%;
            height: 100%;
          }
        }

        .info {
          flex: 1;
          margin-left: 20px;
          background-color: #f2f2f2;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .top {
            display: flex;
            justify-content: space-between;

            span {
              flex: 1;
              text-align: center;
              font-size: 12px;
            }

          }

          .total {
            display: flex;
            justify-content: space-between;

            span {
              flex: 1;
              text-align: center;
              font-size: 15px;
            }

          }
        }
      }
    }
  }

  .accountDialog {
    ::v-deep {
      .accountList {
        height: 500px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        padding: 20px;

        .item {
          display: flex;
        width: 100%;
          margin-bottom: 20px;
// height: 20px !important;
          &:last-child {
            margin-bottom: 0px;
          }

          .img {
            width: 50px;
            height: 50px;
            border-radius: 8px;

            img {
              border-radius: 8px;

              width: 100%;
              height: 100%;
            }
          }

          .info {
            flex: 1;
            margin-left: 20px;
            background-color: #f2f2f2;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .top {
              display: flex;
              justify-content: space-between;

              span {
                flex: 1;
                text-align: center;
                font-size: 12px;
              }

            }

            .total {
              display: flex;
              justify-content: space-between;

              span {
                flex: 1;
                text-align: center;
                font-size: 15px;
              }

            }
          }
        }
      }
    }
  }
}
</style>
